<script setup>
import { ref, useTemplateRef } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const name = ref("");
const roomId = ref("");
const username = ref("");
const hideName = useTemplateRef("hideName");
const hideRoomId = useTemplateRef("hideRoomId");
const hideUserName = useTemplateRef("hideUserName");
function toChat() {
  if (!name.value) {
    hideName.value.style.display = "block";
    return;
  }
  hideName.value.style.display = "none";
  sessionStorage.setItem("name", name.value);
  sessionStorage.setItem("mode", "chat");
  router.push("/chat");
}
function toChatRoom() {
  if (!roomId.value || !username.value) {
    hideRoomId.value.style.display = "block";
    hideUserName.value.style.display = "block";
    return;
  }
  hideRoomId.value.style.display = "none";
  hideUserName.value.style.display = "none";
  sessionStorage.setItem("username", username.value);
  sessionStorage.setItem("roomId", roomId.value);
  sessionStorage.setItem("mode", "chatroom");
  router.push("/chatroom");
}
</script>
<template>
  <div class="login-box">
    <div class="chat">
      <p>1对1聊天</p>
      <label for="name">请输入昵称</label>
      <input type="text" id="name" v-model="name" />
      <span ref="hideName">请输入昵称</span>
      <button @click="toChat">进入</button>
    </div>
    <div class="chat-room">
      <p>聊天室</p>
      <label for="roomId">请输入房间号</label>
      <input type="text" id="roomId" v-model="roomId" />
      <span ref="hideRoomId">请输入房间号</span>
      <label for="username">请输入昵称</label>
      <input type="text" id="username" v-model="username" />
      <span ref="hideUserName">请输入昵称</span>
      <button @click="toChatRoom">进入</button>
    </div>
  </div>
</template>
<style scoped>
.login-box {
  width: 100vw;
  height: 100vh;
  background-image: url("@/assets/images/1.png");
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}
.chat,
.chat-room {
  margin: 0 5%;
  width: 300px;
  border-radius: 50px;
  height: 300px;
  padding: 20px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.chat {
  background-color: rgba(255, 255, 255, 0.4);
}
.chat-room {
  background-color: rgba(0, 0, 0, 0.4);
}
.chat p,
.chat-room p {
  font-size: 20px;
  font-family: "宋体";
  font-weight: bold;
}
.chat-room p {
  color: white;
}

.chat input,
.chat-room input {
  width: 80%;
  height: 30px;
  background-color: rgba(255, 255, 255, 0.4);
  border: none;
  border-radius: 5px;
  margin-bottom: 5px;
}
.chat input {
  background-color: rgba(0, 0, 0, 0.4);
}
.chat label,
.chat-room label {
  margin: 25px 0 5px 0;
  font-size: 16px;
  font-weight: 300;
  font-family: "宋体";
}
.chat-room label {
  color: white;
}
button {
  margin-top: 15px;
  border: none;
  padding: 10px 35px;
  font-family: "宋体";
  border-radius: 10px;
  font-size: 15px;
}
.chat span {
  font-family: "宋体";
  font-size: 13px;
  color: red;
  font-weight: bold;
  display: none;
}
.chat-room span {
  font-family: "宋体";
  font-weight: bold;
  font-size: 13px;
  display: none;
  color: red;
}
</style>
